import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Todos from './Todos'
import TodoAdd from './TodoAdd'

export default class Todo extends Component {
	constructor(){
		super();
		this.state = {
			todos: [
				{
					title: "react",
					content: "学习react"
				},
				{
					title: "js",
					content: "学习js"
				},
			]
		}
		this.add = this.add.bind(this);
	}
	add(title,content){
		let { todos } = this.state;
		todos.push( {
			title,
			content
		} );
		this.setState({
			todos
		})
	}
  render() {
		return (
			<div>
				<h3>Todo</h3>
				<hr />
				<Link to="/todoList/todos">todo列表</Link>
				<span> | </span>
				<Link to="/todoList/add">添加</Link>
				<Route path="/todoList/todos" render={()=><Todos todos={this.state.todos} />}></Route>
				<Route path="/todoList/add" render={()=><TodoAdd add={this.add} />}></Route>
			</div>
		)
  }
}

